<template>
  <div class="wifiList" @click.stop>
    <div class="block">
      <SvgIcon class="close" name="关闭" :size="20" color="#000" @click="emit('close')" />
      <div class="title">为Storage配置Wi-Fi</div>
      <p class="content"> Storage将使用所填写的Wi-Fi进行联网</p>
      <div class="list">
        <div class="item" v-for="item in list" :key="item" @click="checkWifi(item)">
          <SvgIcon class="icon" name="wifi2" :size="18" color='#fff' style="color:#fff;" />
          <span class="text">{{item.bssid}}</span>
          <SvgIcon name="锁" :size="16" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon.vue';
import {onMounted, ref} from 'vue'
import {wifiList,wifiInfo} from "@/api/index.js";

const emit = defineEmits(['close', 'change']);
const columns = ref([])
const list = ref({})
onMounted(async () => {
  // con
    const {data, code} = await wifiList()
    if (code === 200) {
      list.value = data
    }else{
      console.error('wifi名称列表数据获取失败!')
    }
}
)

const checkWifi = (item) => {
  emit('change', item)
}
</script>

<style lang="scss" scoped>
.wifiList {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .block {
    width: 335px;
    height: 556px;
    background-color: #fff;
    border-radius: 16px;
    background: #FFF;
    padding: 32px 10px;
    position: relative;

    .close {
      position: absolute;
      right: 20px;
      top: 20px
    }

    .title {
      width: 100%;
      text-align: center;
      color: #191919;
      font-weight: 600;
      font-size: 15px;
      margin-top: 30px;
    }

    .content {
      width: 100%;
      text-align: center;
      margin-top: 4px;
      color: #666;
      font-size: 12px;
    }

    .list {
      width: 100%;
      overflow: hidden;
      overflow-y: auto;
      height: 400px;
      margin-top: 20px;
      padding: 0 25px;

      .item {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 0;
        padding: 10px;

        .text {
          color: #191919;
          font-size: 14px;
          margin-right: auto;
          margin-left: 10px;
        }

        .icon {
          width: 24px;
          height: 24px;
          border-radius: 39px;
          background: #427BFF;
        }

        &:active {
          background: #EEE;
          border-radius: 6px;
          /* 点击时背景色更深 */
        }
      }
    }
  }
}
</style>
